<template>
	<el-container class="home-container">
		<!-- 头部区域 -->
		<el-header>
			<div>
				<span>TPEDU开源网校管理系统</span>
			</div>
			<el-button type="info" @click="logout">退出</el-button>
		</el-header>
		<!-- 页面主体区域 -->
		<el-container>
			<!-- 侧边栏 -->
			<el-aside :width="isCollapse ? '64px' : '200px' ">
                <div class="toggle-button" @click="toggleCollapse" :title="isCollapse ? '点击展开' : '点击折叠' ">|||</div>
                <el-menu
                        background-color="#001529"
                        text-color="#fff"
                        active-text-color="#1890ff"
                        unique-opened
                        :collapse="isCollapse"
                        :collapse-transition="false"
                        router :default-active="this.$route.path">
                    <!--一级菜单-->
                    <el-submenu :index="item.id + ''" v-for="item in menuList" :key="item.id">
                        <!--一级菜单的模板区-->
                        <template slot="title">
                            <i :class="iconsObj[item.id]"></i>
                            <span>{{item.authName}}</span>
                        </template>
                        <!--二级菜单-->
                        <el-menu-item :index=" '/' + subItem.path" v-for="subItem in item.children" :key="subItem.id" >
                            <!--二级菜单的模板区-->
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>{{subItem.authName}}</span>
                            </template>
                        </el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
			<!-- 内容主体 -->
			<el-main>
                <router-view></router-view>
            </el-main>
		</el-container>
	</el-container>

</template>

<script>
	export default{
	    data(){
           return {
               menuList:[],
               iconsObj:{
                   '125':'el-icon-s-custom',
                   '103':'el-icon-s-claim',
                   '101':'el-icon-s-goods',
                   '102':'el-icon-s-order',
                   '145':'el-icon-s-marketing',
               },
               isCollapse:false
           }
        },
	    created(){
            this.getMenuList();
        },
		methods:{
			logout(){

				window.sessionStorage.clear();
				this.$router.push('/login');
			},
            //获取所有的菜单
            async getMenuList(){
			    const {data:res} = await this.$http.get('menus');
			    console.log(res);
			    if (res.meta.status !== 200) return this.$message.error(res.meta.msg);
			    this.menuList = res.data

            },
            toggleCollapse(){
                this.isCollapse = !this.isCollapse;
            }

		}
		
	}

</script>
<style lang="less" scoped>
	.home-container{
		height:100%;
	}
	.el-header{
		display:flex;
		justify-content:space-between;
		background-color:#333744;
		align-items:center;
		color:#fff;
        font-weight: 600;
        letter-spacing: 2px;
		font-size:18px;
		>div{
			display:flex;
			align-item:center;
			span{
				margin-left:-5px;
			}
		}
	}
	.el-aside {
		background-color:#001529;
        //处理每次在展开右侧有一个边框线的问题
        .el-menu{
            border-right: none;
        }
	}
	.el-main{
		background:#f0f2f5;
	}
    .toggle-button{
        background:#4A5064;
        font-size: 10px;
        line-height: 24px;
        color: #fff;
        text-align: center;
        letter-spacing: 0.3em;
        cursor:pointer;
        position: relative;
        bottom: 3px;
    }
</style>